<template>
  <div class="cinema-Add">
    <el-card class="box-card">
      <div slot="header" class="header">
        <span>编辑电影</span>
      </div>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="电影ID">
          <el-input v-model="form.filmId" placeholder="电影Id" disabled></el-input>
        </el-form-item>
        <el-form-item label="电影名称">
          <el-input v-model="form.name" placeholder="电影名称" disabled></el-input>
        </el-form-item>
        <el-form-item label="电影分类">
          <el-input v-model="form.category" placeholder="电影分类"></el-input>
        </el-form-item>
        <el-form-item label="导演">
          <el-input v-model="form.director" placeholder="导演"></el-input>
        </el-form-item>
        <el-form-item label="上映时间">
          <div class="block">
            <el-date-picker v-model="form.premiereAt" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="评分">
          <el-input v-model="form.grade" placeholder="评分"></el-input>
        </el-form-item>
        <el-form-item label="语言">
          <el-input v-model="form.language" placeholder="语言"></el-input>
        </el-form-item>
        <el-form-item label="时长">
          <el-input v-model="form.runtime" placeholder="时长"></el-input>
        </el-form-item>
        <el-form-item label="产地">
          <el-input v-model="form.nation" placeholder="产地"></el-input>
        </el-form-item>
        <el-form-item label="电影类型">
          <el-input v-model="form.filmType" placeholder="电影类型"></el-input>
        </el-form-item>
        <el-form-item label="电影简介">
          <el-input
          type="textarea"
          :rows="2"
          placeholder="电影简介"
          v-model="form.synopsis">
          </el-input>
        </el-form-item>
        <el-form-item label="在售">
          <el-switch v-model="form.isSale" :active-text="form.isSale?'是':'否'"  @change='changes'></el-switch>
        </el-form-item>
       <el-form-item label="预售">
          <el-switch v-model="form.isPresale" :active-text="form.isPresale?'是':'否'" @change='changess'></el-switch>
        </el-form-item>  

        <el-form-item label="海报">        
           <el-upload
            class="avatar-uploader"
            action="http://gao.huruqing.cn:3000/admin/film/upload"
          
            :show-file-list="false"
            :on-success="handlePictureCard"
           >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          </el-upload>
          <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="imageUrl" alt />
          </el-dialog> -->
        </el-form-item>

        <!-- <el-form-item label="剧照">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handlePictureCard"
          >
          
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading" :disabled="disabled">立即提交</el-button>
          <el-button @click="resetFilmInfo">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  watch: {
     imgUrl(){
       this.disabled=false
     this.imageUrl= this.imgUrl
     console.log(this.imageUrl)
   },
  //  premiereAt(){
  //    this.value1=this.form.premiereAt
  //  }
  },
  components: {},
  data() {
    return {
      isadd:false,
      imageUrl:"",
      imgUrl:"",
      // filmId:"",
      value1: "",
      disabled:true,
      dialogImageUrl: "",
      dialogVisible: false,
      form: {
        category: "",
        director: "",
        premiereAt: "",
        name: "", // 必须

        poster: "",
        grade: "",
        language: "",
        runtime: "",
        filmType: "",
        isPresale: true,
        timeType: "3",
        isSale: true,
        synopsis: "",
        nation: ""
      },
      loading: false,

      //上映时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();

              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  created() {
    const filmId = this.$route.params.filmId;
    console.log("传过来的电影Id", this.$route.params.filmId);
    this.getFilmInfo(filmId);
  },
  methods: {
changes(value){
  console.log(value)
  this.form.isPresale=!value
  //  this.form.isPresale=value
},
changess(value){
  this.form.isSale=!value
},
resetFilmInfo() {
      this.form.category = ""; //电影分类
      this.form.director = ""; //导演
      this.form.grade = ""; //评分
      this.form.language = ""; //语言
      this.form.runtime = ""; //时长
      this.form.nation = ""; //产地
      this.form.filmType = ""; //类型
      this.form.synopsis = ""; //简介
      this.form.isSale = false;
      this.$router.push('/film/list')
    },
    //获取定影详情的数据
    getFilmInfo(filmId) {
      const url = "/film/getDetail";
      this.$axios
        .post(url, { filmId })
        .then(res => {
          console.log(res);
          this.imgUrl=res.film.poster
          console.log(this.imgUrl)
          this.form = res.film;
        
        })
        .catch(err => {
          console.log(err);
        });
    },
    //电影上传图片
    //  handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
    handlePictureCard(response, file, fileList) {
      this.form.poster = response.image.url;
      this.imageUrl = URL.createObjectURL(file.raw);

      this.disabled=false
      console.log(this.form.poster);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },

    onSubmit() {
      // console.log("时间", this.value1);
      // this.form.premiereAt = this.value1;
      console.log("this.form", this.form);
      this.isSubmit =
        this.form.nation &&
        this.form.category &&
        this.form.director &&
        this.form.grade &&
        this.form.language &&
        this.form.runtime &&
        this.form.filmType &&
        this.form.synopsis;
      this.loading = true;
      console.log("isSubmit", this.isSubmit);
      if (this.isSubmit) {
        const url = "/film/edit";
        this.$axios
          .post(url, this.form)
          .then(res => {
            this.$message.success("修改数据成功");
            this.loading = false;
            console.log(res);
            setTimeout(() => {
              
              this.$router.push("/film/list");
            }, 500);
          })
          .catch(err => {
            this.$message.error("错误啦", err);
            this.loading = false;
            console.log("错误啦", err);
            console.log(err);
          });
      } else {
        this.loading = false;
        this.$message.error("请填写数据");
      }

      console.log("submit!");
    }
  }
};
</script>
<style lang="less" scoped>
//上映时间
.el-date-editor {
  width: 100%;
}

</style>
<style lang="less" scoped>
.el-form {
  width: 500px;
}
.header {
  font-size: 22px;
}


//头像上传
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>